<template>
  <!-- 金额 -->
  <Drawer
    title="详情"
    :visible="isShow"
    :header-color="'#e7ecf8'"
    width="80%"
    :footer-btns="[
      {
        text: '导出',
        type: 'info',
        icon: 'export',
        trigger: 'export',
      },
      {
        text: '打印',
        type: 'info',
        trigger: 'print',
      },
    ]"
    @cancel="cancel"
    @print="print"
    @export="exportBtn"
  >
    <div class="drawer-box">
      <div class="box-title">项目名称列表</div>
      <div class="box-table">
        <el-table
          ref="tableref"
          v-loading="tableLoading"
          :data="tableDataList"
          border
          :header-cell-style="{
            background: '#fafafa',
            borderColor: '#e7ecf8',
            color: '#555555',
            textAlign: 'center',
          }"
          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          height="100%"
          style="width: 100%"
          show-summary
          row-style="font-size:small"
          :summary-method="getSummaries"
        >
          <el-table-column align="center" label="基本信息">
            <el-table-column label="序号" type="index" align="center" width="60" />
            <el-table-column label="分类" prop="accountName" align="center" />
          </el-table-column>
          <el-table-column prop="totalCost" label="金额" align="right" width="140">
            <template slot-scope="scope">
              {{ scope.row.totalCost | numberToCurrency }}
              <!-- <span class="text-btn" @click="handleDrectMoney(scope.row)">{{ scope.row.totalCost | numberToCurrency }}</span> -->
            </template>
          </el-table-column>

          <el-table-column prop="totalProportion" label="比例%" align="right" width="80">
            <template slot-scope="scope">{{ scope.row.totalProportion.toFixed(2) }}%</template>
          </el-table-column>
          <el-table-column label="直接成本" align="center">
            <el-table-column prop="amount" label="金额" align="right" width="140">
              <template slot-scope="scope">
                <span
                  class="text-btn"
                  @click="handleDrectMoney(scope.row)"
                >{{ scope.row.amount | numberToCurrency }}</span>
                <!-- {{ scope.row.amount | numberToCurrency }} -->
              </template>
            </el-table-column>

            <el-table-column prop="amountProportion" label="比例%" align="right" width="80">
              <template slot-scope="scope">{{ scope.row.totalProportion.toFixed(2) }}%</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="间接成本" align="center">
            <el-table-column label="医技分摊" align="center">
              <!-- <el-table-column label="金额" prop="medicalTechnologyCost" />
              <el-table-column
                label="比例(%)"
                prop="medicalTechnologyProportion"
              />-->
              <el-table-column prop="medicalTechnologyCost" label="金额" align="right" width="140">
                <template
                  slot-scope="scope"
                >{{ scope.row.medicalTechnologyCost | numberToCurrency }}</template>
              </el-table-column>

              <el-table-column
                prop="medicalTechnologyProportion"
                label="比例%"
                align="right"
                width="80"
              >
                <template slot-scope="scope">{{ scope.row.medicalTechnologyProportion.toFixed(2) }}%</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="医辅分摊" align="center">
              <!-- <el-table-column label="金额" prop="auxiliaryCost"/>
              <el-table-column label="比例(%)" prop="auxiliaryProportion"-->

              <el-table-column prop="auxiliaryCost" label="金额" align="right" width="140">
                <template slot-scope="scope">{{ scope.row.auxiliaryCost | numberToCurrency }}</template>
              </el-table-column>

              <el-table-column prop="auxiliaryProportion" label="比例%" align="right" width="80">
                <template slot-scope="scope">{{ scope.row.auxiliaryProportion.toFixed(2) }}%</template>
              </el-table-column>/>
            </el-table-column>
            <el-table-column label="管理分摊" align="center">
              <!-- <el-table-column label="金额" prop="adminCost"/>
              <el-table-column label="比例(%)" prop="adminProportion"-->

              <el-table-column prop="adminCost" label="金额" align="right" width="140">
                <template slot-scope="scope">{{ scope.row.adminCost | numberToCurrency }}</template>
              </el-table-column>

              <el-table-column prop="adminProportion" label="比例%" align="right" width="80">
                <template slot-scope="scope">{{ scope.row.adminProportion.toFixed(2) }}%</template>
              </el-table-column>/>
            </el-table-column>
            <el-table-column label="间接成本总计" align="center">
              <!-- <el-table-column label="金额" prop="totalIndirectCost"/>
              <el-table-column label="比例(%)" prop="totalIndirectProportion"
              />-->
              <el-table-column prop="totalIndirectCost" label="金额" align="right" width="140">
                <template slot-scope="scope">{{ scope.row.totalIndirectCost | numberToCurrency }}</template>
              </el-table-column>

              <el-table-column prop="totalIndirectProportion" label="比例%" align="right" width="80">
                <template slot-scope="scope">{{ scope.row.totalIndirectProportion.toFixed(2) }}%</template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <DrectCostMoney
      v-if="isDreactMoney"
      :tableDataList="tableDrectMoney"
      :isDreactMoney="isDreactMoney"
      @handleCancle="handleCancle"
    />
    <!-- 人员经费 -->
    <PersonnelFundsDetails
      :funds-per-details-visible="fundsPerDetailsVisible"
      :tableRyJfCol="tableRyJfCol"
      :tableRyjfData="tableRyjfData"
      @fundsPerDetails="fundsPerDetails"
    />

    <!-- 卫生材料 -->
    <Wsclfee
      v-if="wsclVisible"
      :wsclVisible="wsclVisible"
      :tableWsclData="tableWsclData"
      @handleCloseWS="handleCloseWS"
    />
    <!-- 药品费 -->
    <DrugCostDetails
      v-if="drugCostDetailsVisible"
      :drug-cost-details-visible="drugCostDetailsVisible"
      :tableDrugData="tableDrugData"
      @drugCostDetails="drugCostDetails"
    />
    <!-- 固定资产折旧 -->
    <!-- 固定资产 折旧 -->
    <FixedAssetsDetails
      v-if="fixedAssetsDetailsVisible"
      :fixed-assets-details-visible="fixedAssetsDetailsVisible"
      :tableGdzcData="tableGdzcData"
      @fixedAssetsDetails="fixedAssetsDetails"
    />
    <!-- 无形资产摊销 -->
    <WxzcTanxiao
      v-if="wxzcVisible"
      :wxzcVisible="wxzcVisible"
      :tableWxzcData="tableWxzcData"
      @handleCloseWxzc="handleCloseWxzc"
    />
    <!-- 提取医疗风险基金 -->
    <!-- 其他费用 -->
    <OtherExpensesDetails
      v-if="otherExpensesDetailsVisible"
      :other-expenses-details-visible="otherExpensesDetailsVisible"
      :tableOtherData="tableOtherData"
      @otherExpensesDetails="otherExpensesDetails"
    />
  </Drawer>
</template>
<script>
import PersonnelFundsDetails from '@/pages/perMonthDrawer/PersonnelFundsDetails.vue'
import DrectCostMoney from './drectCostMoney'
import SalaryDrawer from '@/pages/analysisReport/component/salaryDrawer'
import Wsclfee from '@/pages/perMonthDrawer/wsclfee.vue'
import DrugCostDetails from '@/pages/perMonthDrawer/DrugCostDetails.vue'
import FixedAssetsDetails from '@/pages/perMonthDrawer/FixedAssetsDetails.vue'
import WxzcTanxiao from '@/pages/perMonthDrawer/wxzcTanxiao.vue'
import OtherExpensesDetails from '@/pages/perMonthDrawer/OtherExpensesDetails.vue'
import {
  listSalaryWithExtraByDeptCode,
  listMaterialsCategorySummary,
  listCostByDeptCodeAndUnitCode,
  etlDepreciationDetail
} from '@/utils/apis/report'
export default {
  components: {
    DrectCostMoney,
    SalaryDrawer,
    PersonnelFundsDetails,
    Wsclfee,
    DrugCostDetails,
    FixedAssetsDetails,
    WxzcTanxiao,
    OtherExpensesDetails
  },
  props: {
    // 接收父组件传来的值
    isShow: Boolean,
    titleText: String,
    tableDataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      otherExpensesDetailsVisible: false,
      tableOtherData: [],
      wxzcVisible: false,
      tableWxzcData: [],
      fixedAssetsDetailsVisible: false,
      tableGdzcData: [],
      fundsPerDetailsVisible: false,
      tableRyJfCol: [],
      tableRyjfData: [],
      wsclVisible: false,
      tableWsclData: [],
      salaryShow: false,
      tableDrectMoney: [],
      isDreactMoney: false,
      drugCostDetailsVisible: false,
      tableDrugData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableLoading: false,
      InPostPerDetailsVisible: false,
      HygieneDetailsVisible: false,
      deptVisible: false, //科室
      rjdeptTable: [],
      otherFeeVisible: false,
      otherFeeData: [],
      otherTitle: ''
    }
  },
  inject: ['tableRoot'],
  // provide() {
  //   return { tableRoot: this.tableRoot };
  // },
  mounted() {},
  updated() {
    if (this.$refs.tableref) {
      this.$refs.tableref.doLayout()
    }
  },
  // created(){
  //   this.getListSalaryWithAccByPDeptCode()
  // },
  methods: {
    handleDrectMoney(row) {
      if (row.accountName === '人员经费') {
        this.fundsPerDetailsVisible = true
        this.getListSalaryWithAccByPDeptCode()
      } else if (row.accountName === '卫生材料') {
        this.deptCode = row.deptCode
        this.wsclVisible = true
        this.getChildData(
          listMaterialsCategorySummary,
          'tableWsclData',
          this.tableRoot.row.deptCode,
          ''
        )
      } else if (row.accountName === '药品费') {
        this.deptCode = row.deptCode
        this.drugCostDetailsVisible = true
        this.getChildData(
          listCostByDeptCodeAndUnitCode,
          'tableDrugData',
          this.tableRoot.row.deptCode,
          '103'
        )
      } else if (row.accountName === '固定资产折旧') {
        this.deptCode = row.deptCode
        this.fixedAssetsDetailsVisible = true
        this.getChildData(
          etlDepreciationDetail,
          'tableGdzcData',
          this.tableRoot.row.deptCode,
          'ZC057'
        )
      } else if (row.accountName === '无形资产摊销') {
        this.deptCode = row.deptCode
        this.wxzcVisible = true
        this.getChildData(
          etlDepreciationDetail,
          'tableWxzcData',
          this.tableRoot.row.deptCode,
          'ZC058'
        )
      } else if (row.accountName === '提取医疗风险基金') {
      } else if (row.accountName === '其他费用') {
        this.otherExpensesDetailsVisible = true
        this.deptCode = row.deptCode
        this.getChildData(
          listCostByDeptCodeAndUnitCode,
          'tableOtherData',
          this.tableRoot.row.deptCode,
          '107'
        )
      }
    },
    getChildData(api, tableList, deptCode, unitCode) {
      // const date = this.tableRoot.newParamList.yearMonth?.[0];
      // let currentYear = new Date(date).getFullYear();
      // let currentMonth = new Date(date).getMonth() + 1;
      // let param = {
      //   month: this.formatNumber(currentMonth),
      //   year: currentYear,
      //   yard: "1"
      // };
      const startEnd = this.tableRoot.newParamList.yearMonth
      let param
      if (Array.isArray(startEnd)) {
        param = {
          starYear: startEnd[0].split('-')[0],
          starMonth: startEnd[0].split('-')[1],
          endYear: startEnd[1].split('-')[0],
          endMonth: startEnd[1].split('-')[1],
          unitCode: unitCode
        }
      } else {
        param = {
          starYear: startEnd.split('-')[0],
          starMonth: startEnd.split('-')[1],
          endYear: startEnd.split('-')[0],
          endMonth: startEnd.split('-')[1],
          unitCode: unitCode
        }
      }
      api(param, deptCode).then(res => {
        if (res.data.code === 200) {
          this[tableList] = res.data.data
        }
      })
    },
    otherExpensesDetails(params) {
      this.otherExpensesDetailsVisible = params.otherExpensesDetailsVisible
    },
    drugCostDetails(params) {
      this.drugCostDetailsVisible = params.drugCostDetailsVisible
    },
    handleCloseWxzc(res) {
      this.wxzcVisible = res.wxzcVisible
    },
    handleCloseWS(res) {
      this.wsclVisible = res.wsclVisible
    },
    fixedAssetsDetails(params) {
      this.fixedAssetsDetailsVisible = params.fixedAssetsDetailsVisible
    },
    fundsPerDetails(params) {
      this.fundsPerDetailsVisible = params.fundsPerDetailsVisible
    },
    getListSalaryWithAccByPDeptCode() {
      // const date = this.tableRoot.newParamList.yearMonth?.[0];
      // let currentYear = new Date(date).getFullYear();
      // let currentMonth = new Date(date).getMonth() + 1;
      const startEnd = this.tableRoot.newParamList.yearMonth
      let param
      if (Array.isArray(startEnd)) {
        param = {
          starYear: startEnd[0].split('-')[0],
          starMonth: startEnd[0].split('-')[1],
          endYear: startEnd[1].split('-')[0],
          endMonth: startEnd[1].split('-')[1]
        }
      } else {
        param = {
          starYear: startEnd.split('-')[0],
          starMonth: startEnd.split('-')[1],
          endYear: startEnd.split('-')[0],
          endMonth: startEnd.split('-')[1]
        }
      }
      listSalaryWithExtraByDeptCode(param, this.tableRoot.row.deptCode).then(
        res => {
          if (res.data.code === 200) {
            this.tableRyjfData = res.data.data
          }
        }
      )
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    },
    getAcSetSourceList() {
      const date = this.newParamList.yearMonth
      let currentYear = new Date(date).getFullYear()
      let currentMonth = new Date(date).getMonth() + 1
      let param = {
        month: this.formatNumber(currentMonth),
        year: currentYear
      }
      getAcSetSource(param).then(res => {
        if (res.data.code === 200) {
          this.tableRyJfCol = res.data.data
        }
      })
    },
    handleSalary(row) {
      //薪酬
    },
    handleAchievements(row) {
      //绩效
    },
    handleCoseDept(item) {
      this.deptVisible = item.deptVisible
    },
    hanldeCloseOtherFee(item) {
      this.otherFeeVisible = item.deptVisible
    },
    // 关闭抽屉
    cancel() {
      this.$emit('handleCancle')
    },
    // 导出
    exportBtn() {
      console.log('导出')
    },
    // 打印
    print() {
      console.log('打印')
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this._getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this._getData()
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index === 2 || index === 3) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            // sums[index] += " 元";
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    // 人员经费详情
    btnPerDetails() {
      this.InPostPerDetailsVisible = true
    },
    perDetails(params) {
      this.InPostPerDetailsVisible = params.InPostPerDetailsVisible
    },
    // 卫生材料费详情
    btnHygieneDetails() {
      this.HygieneDetailsVisible = true
    },
    hygieneDetails(params) {
      this.HygieneDetailsVisible = params.HygieneDetailsVisible
    }
  }
}
</script>
<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.drawer-box {
  height: 100%;
}
.box-title {
  height: 44px;
  background: #f6f9fe;
  border-bottom: 1px solid #e7ecf8;
  font-size: 16px;
  color: #555555;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.box-table {
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
